<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <title>宿舍值日表</title>
</head>
<body>

<div id="app">
  <h2>宿舍值日表</h2>
  <!-- 使用 v-for 生成一周的值日安排 -->
  <ul>
    <li 
      v-for="(duty, index) in duties" 
      :key="index"
      :style="{ fontWeight: isToday(duty.day) ? 'bold' : 'normal', color: isToday(duty.day) ? 'red' : 'black'}"
    >
      {{ duty.day }}：{{ duty.person }}
      <!-- 每条后面加一个“更换值日生”按钮，用于演示数据更新 -->
      <button @click="changeDuty(index)">更换值日生</button>
    </li>
  </ul>
</div>

  <script src="../../../js/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
      duties: [
        { day: '周一', person: '老大' },
        { day: '周二', person: '老四' },
        { day: '周三', person: '老三' },
        { day: '周四', person: '老六' },
        { day: '周五', person: '老五' },
        { day: '周六', person: '老二' },
        { day: '周日', person: '老七' }
      ],
      // 随机姓名池，点击更换时从这里挑一个
      namePool: ['坤哥', '哈基米', '老八', '汤姆', '杰瑞', 'Tony老师'],
      // 模拟今天是“周四”，便于展示样式绑定
      today: '周四'

  },
  created() {
    console.log('created => 数据已初始化，但视图还没挂载');
  },
  mounted() {
    console.log('mounted => 宿舍值日表已就绪！');
  },
  beforeUpdate() {
    console.log('beforeUpdate => DOM 即将更新...');
  },
  updated() {
    console.log('updated => DOM 已更新！');
  },
  methods: {
    // 点击按钮时，更换指定 index 项目的值日生
    changeDuty(index) {
      const randomIndex = Math.floor(Math.random() * this.namePool.length);
      const newName = this.namePool[randomIndex];
      // 更新 person，引发页面重新渲染
      this.duties[index].person = newName;
    },
    // 简单判断给今天加个样式
    isToday(day) {
      return day === this.today;
    }
  }
});
</script>

</body>
</html>
